<template>
  <div>
    <!-- <el-form :inline="true" size="mini">
      <div class="search-common">
        <el-form-item label="编号" label-width="70px">
          <el-input placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </div>
    </el-form> -->
    <div class="mt10 p10" style="background:#fff">
      <br>
      <el-table :data="queryList" size="mini" border :stripe="true" style="width:99%">
        <el-table-column prop="tab_code" label="编号">
        </el-table-column>
        <el-table-column prop="tab_name" label="名称">
        </el-table-column>
        <el-table-column  label="值">
          <template slot-scope="scope">
            {{scope.row.tab_type=='string'?scope.row.tab_value:((scope.row.tab_type=='enum'?(scope.row.tab_value==0?'关闭':'开启'):''))}}
          </template>
        </el-table-column>
        <el-table-column prop="tab_desc" label="描述">
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editBaseInfo(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total">
    </page-pagination>

    <common-dialog title="编辑" :base-dialog="baseDialog">
     
      <el-form :model="edie_base_dialog" :rules="rules" ref="edie_base_dialog" size="mini" label-width="80px" slot="body">
        <el-form-item label="编号" prop="tab_code">
          <el-input v-model="edie_base_dialog.tab_code" disabled="disabled" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="tab_name">
          <el-input v-model="edie_base_dialog.tab_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="值">
          <template v-if="edie_base_dialog.tab_type=='string'">
            <el-input v-model="edie_base_dialog.tab_value" auto-complete="off"></el-input>
          </template>

            <template v-else-if="edie_base_dialog.tab_type=='enum'">
               <el-select  v-model="edie_base_dialog.tab_value">
                <el-option 
                v-for="item of edie_base_dialog.tab_enum_value" 
                :key="item.value"
                :label="item.name" 
                :value="item.value+''">
                </el-option>
              
            </el-select>
          </template>

         
        </el-form-item>
        <el-form-item label="描述" prop="tab_desc">
          <el-input v-model="edie_base_dialog.tab_desc" type="textarea" :rows="3" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer tr">
        <el-button @click="closeDialog('edie_base_dialog')" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="editSubmit('edie_base_dialog')">确 定</el-button>
      </div>
    </common-dialog>

  </div>
</template>
<script>
import service from '@/service/index_c';
import commonDialog from '@/components/Common/CommonDialog'
import pagePagination from "@/components/Common/pagePagination";
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      queryList: [],
      baseDialog: false,
      edie_base_dialog: {
        tab_id: '',
        tab_code: '',
        tab_name: '',
        tab_value: '',
        tab_enum_value:'',
        tab_type:''
      },
      rules: {
        tab_code: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        tab_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        tab_value: [{ required: true, message: '请输入值', trigger: 'blur' }],
        tab_desc: [{ required: true, message: '请输入描述', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.queryBaseSettingList();
  },
  methods: {
    //分页
    pageFunNumber(page) {
      this.queryBaseSettingList(page)
    },
    //获取列表
    async queryBaseSettingList(page = 1) {
      let res = await service.haiheiServerBaseSettingList({
        page: page,
        pageSize: this.pageSize
      });
      if (res.success) {
        //this.queryList = res.result.pageList;
        let result = res.result.pageList;
        for (let item of result) {
          if (item.tab_type == 'enum') {
            item.tab_enum_value = JSON.parse(item.tab_enum_value)
          }
        }
        this.queryList = result;
     // console.log(result)
        this.page = res.result.page;
        this.total = res.result.nums
      }
    },
    //编辑
    editBaseInfo(item) {
      // console.log(item)
      this.baseDialog = true;
      this.edie_base_dialog = {
        tab_id: item.tab_id,
        tab_code: item.tab_code,
        tab_name: item.tab_name,
        tab_value: item.tab_value,
        tab_type:item.tab_type,
        tab_desc: item.tab_desc,
        tab_enum_value:item.tab_enum_value
      }
    },
    // 关闭
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.baseDialog = false;
    },
    //提交
    editSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        this.editBaseSettingItem();
      })
    },
    //编辑function
    async editBaseSettingItem() {
      let params=Object.assign({},this.edie_base_dialog)
      let res = await service.haiheiServerEditBaseSetting(params);
      if (res.success) {
        this.baseDialog = false;
        this.queryBaseSettingList();
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        })
      }
    },
  },
  components: {
    commonDialog,
    pagePagination
  }

}
</script>

